<template>
  <div class="goodsindex">
    <!-- 搜索条件 -->
    <el-row :gutter="20" class="goodsindex-queryInfo">
      <!-- 商品名称搜索 -->
      <el-col :xs="8" :sm="6" :md="6" :lg="4" :xl="4">
        <el-input
          class="goodsindex-queryInfo-li"
          v-model="queryInfo.telephone"
          clearable
          size="small"
          placeholder="请输入电话号码"
        ></el-input>
      </el-col>
      <!-- 商品分类搜索 -->
      <el-col v-show="false" :xs="8" :sm="6" :md="6" :lg="4" :xl="4">
        <el-select
          class="goodsindex-queryInfo-li"
          v-model="queryInfo.type"
          size="small"
          clearable
          placeholder="请选择产品分类"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.value"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :xs="6" :sm="4" :md="3" :lg="2" :xl="2">
        <el-button
          type="primary"
          class="goodsindex-queryInfo-li"
          size="small"
          @click="initData"
          >搜索</el-button
        >
      </el-col>
    </el-row>
    <!-- 检索结果 -->
    <el-row :gutter="20" class="goodsindex-list">
      <el-col :span="24">
        <el-table
          :data="tableData.records"
          border
          v-loading="loading"
          size="small"
          style="width: 100%"
        >
          <el-table-column type="index" label="序" width="40">
          </el-table-column>
          <el-table-column prop="id" label="会员编号" width="130">
          </el-table-column>
          <el-table-column prop="userName" label="姓名" width="80">
          </el-table-column>
          <el-table-column
            :formatter="gender"
            prop="gander"
            label="性别"
            width="50"
          >
          </el-table-column>
          <el-table-column prop="telephone" label="联系方式" width="100">
          </el-table-column>
          <el-table-column prop="payThing" label="消费事项" width="80">
          </el-table-column>
          <el-table-column prop="age" label="年龄" width="50">
          </el-table-column>
          <el-table-column
            :formatter="vip"
            prop="vip"
            label="会员等级"
            width="100"
          >
            <template slot-scope="scope">
              <el-dropdown size="small" @command="changeVip">
                <span class="el-dropdown-link">
                  {{ vip(scope.row)
                  }}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu v-if="ROLES == 0" slot="dropdown">
                  <el-dropdown-item :command="{ ...scope.row, vip: 0 }"
                    >普通用户</el-dropdown-item
                  >
                  <el-dropdown-item :command="{ ...scope.row, vip: 1 }"
                    >普通会员</el-dropdown-item
                  >
                  <el-dropdown-item :command="{ ...scope.row, vip: 2 }"
                    >高级会员</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
          <el-table-column prop="money" label="账户余额" width="80">
          </el-table-column>
          <el-table-column :formatter="rebate" label="分成" width="80">
          </el-table-column>

          <el-table-column
            prop="status"
            :formatter="stateFormat"
            label="状态"
            width="50"
          >
          </el-table-column>
          <el-table-column
            :formatter="dateFormat"
            prop="create_time"
            label="注册时间"
            width="150"
          >
          </el-table-column>
          <el-table-column v-if="ROLES == 0" label="操作" width="330">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="warning"
                @click="changeStatu(scope.row)"
                >{{ scope.row.status == 0 ? "启用" : "禁用" }}</el-button
              >
              <el-button size="mini" @click="changeRebate(scope.row)">
                {{ scope.row.rebate ? "关闭" : "开通" }}分成权限
              </el-button>

              <el-button
                size="mini"
                @click="(selected = scope.row), (operation = 1)"
              >
                充值
              </el-button>
              <el-button
                size="mini"
                @click="(selected = scope.row), (operation = 0)"
              >
                退款
              </el-button>
              <!-- <el-button size="mini" type="danger" @click="selected = scope.row"
                >删除</el-button
              > -->
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!-- 分页 -->
    <el-row :gutter="20" class="goodsindex-list">
      <el-col :span="24" class="goodsindex-page-box">
        <el-pagination
          :hide-on-single-page="true"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="queryInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.total"
        >
        </el-pagination>
      </el-col>
    </el-row>

    <!-- delect -->
    <!-- <el-dialog title="提示" :visible.sync="selected" width="30%">
      <span>确定删除单号：{{ selected ? `’${selected.id}‘` : "" }}吗?</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="selected = null">取 消</el-button>
        <el-button
          type="primary"
          @click="deleteUser(selected ? selected.id : null)"
          >确 定</el-button
        >
      </span>
    </el-dialog> -->

    <el-dialog
      :title="operation == 0 ? '退款' : '充值'"
      :visible.sync="selected"
    >
      <el-form :model="money">
        <el-form-item label="金额：" prop="money">
          <el-input-number
            :precision="2"
            :min="1"
            :step="10"
            v-model="money.money"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="selected = null">取 消</el-button>
        <el-button size="mini" type="primary" @click="changeInOut"
          >提 交</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import moment from "moment";
export default {
  data() {
    return {
      ROLES: localStorage.getItem("ROLES"),
      operation: 0,
      money: {},
      dialogVisible: false,
      queryInfo: {
        name: "",
        type: "",
        page: 1,
        pageSize: 10,
      },
      selected: null,
      options: [
        {
          label: 1,
          value: "安心蔬菜",
        },
        {
          label: 2,
          value: "新鲜牛奶",
        },
      ],
      loading: false,
      tableData: [],
    };
  },
  async created() {
    this.initData();
  },
  methods: {
    async initData() {
      let query = this.deleteEmptyProperty(this.queryInfo);
      console.log(query);
      delete query.pageSize;
      delete query.page;
      query.telephone = parseInt(query.telephone);
      let list = await this.http.post("/customer/customerInfo", {
        pageSize: this.queryInfo.pageSize,
        pageNo: this.queryInfo.page,
        query: {
          ...query,
        },
      });
      this.tableData = list.result;
    },
    async changeStatu(select) {
      this.loading = true;
      let type, msg;
      let status = select.status == 0 ? 1 : 0;
      let res = await this.http.post("/customer/updateStatus", {
        id: select.id,
        status: status,
      });
      this.operationMessage(res.error);
    },
    handleSizeChange(size) {
      this.queryInfo.pageSize = size;
      this.initData();
    },
    handleCurrentChange(currentPage) {
      this.queryInfo.pageNo = currentPage;
      this.initData();
    },
    to(url) {
      this.$router.push({ path: url });
    },
    async deleteUser(id) {
      if (!id) {
        this.eui.Message({ message: "请选择用户" });
        return false;
      }
      let res = await this.http.get("/chargeList/delete?id=" + id);
      this.operationMessage(res.error);
    },
    async inOutCusMoney(params) {
      let res = await this.http.post("/customer/inOutCusMoney", params);
      this.operationMessage(res.error);
    },
    operationMessage(statu) {
      let type, msg;
      if (!statu) (type = "success"), (msg = "操作成功");
      else (type = "error"), (msg = "操作失败");
      this.eui.Message({
        message: msg,
        type: type,
      });
      this.selected = null;
      this.initData();
      this.loading = false;
    },
    changeVip(e) {
      let params = {
        id: e.id,
        vip: e.vip,
      };
      this.inOutCusMoney(params);
    },
    changeInOut() {
      let params = {
        id: this.selected.id,
        money: this.money.money,
        inOut: this.operation,
      };
      this.inOutCusMoney(params);
    },
    changeRebate(row) {
      let params = {
        id: row.id,
        rebate: !row.rebate,
      };
      this.inOutCusMoney(params);
    },
    stateFormat(row, column) {
      if (row.status === 0) return "禁用";
      else return "正常";
    },
    rebate(row) {
      return row.rebate ? "是" : "否";
    },
    gender(val) {
      if (val.gender == "0" || val.gender == 0) {
        return "男";
      } else {
        return "女";
      }
    },
    vip(val) {
      switch (val.vip) {
        case 0:
          return "普通用户";
          break;
        case 1:
          return "普通会员";
          break;
        case 2:
          return "高级会员";
          break;

        default:
          break;
      }
    },
    deleteEmptyProperty(object) {
      var result = {};
      for (var i in object) {
        var value = object[i];
        if (typeof value === "object") {
          if (Array.isArray(value)) {
            if (value.length == 0) {
              delete object[i];
              console.log("delete Array", i);
              continue;
            }
          }
          deleteEmptyProperty(value);
          if (isEmpty(value)) {
            console.log("isEmpty true", i, value);
            delete object[i];
            console.log("delete a empty object");
          }
        } else {
          if (value === "" || value === null || value === undefined) {
            delete object[i];
            console.log("delete ", i);
          } else {
            result[i] = value;
          }
        }
      }
      return result;
    },
    dateFormat(row, column) {
      var date = row.createTime;
      if (date == undefined) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    },
  },
};
</script>

<style scoped>
.goodsindex {
  width: 100%;
  min-height: 100%;
  padding: 15px;
  box-sizing: border-box;
}
/* 搜索 */
.goodsindex-queryInfo {
  margin-bottom: 10px;
}
.goodsindex-queryInfo-li {
  width: 100%;
  height: auto;
}
/* 列表 */
.goodsindex-list {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}
/* 分页 */
.goodsindex-page-box {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-end;
}
</style>